<script lang="ts" setup>
import { reactive } from "vue";
import service from "@/utils/service"
import type {IBannar} from "@/mytype"
import { ElMessageBox } from "element-plus";
import {addBannerApi} from "@/api";

interface IEimits {
    (e: "cancel"): void,
    (e: "ok"): void
}
const emit = defineEmits<IEimits>();


const form = reactive<IBannar>({
    "img": "",
    "alt": "",
    "link": "",
    "flag": false
})

const hideSelf = () => {
    emit("cancel");
}

const addBanner = () => {
    addBannerApi(form)
    .then((res:any)=>{
        if(res.code==="200"){
            ElMessageBox({
                title:"提示",
                message:"添加成功！"
            })
            emit("ok");
        }
    })
}



</script>


<template>
    <div class="addbanner-box">
        <el-form :model="form">
            <el-form-item label="图片地址">
                <el-input v-model="form.img"></el-input>
            </el-form-item>
            <el-form-item label="超链">
                <el-input v-model="form.link"></el-input>
            </el-form-item>
            <el-form-item label="图片提示">
                <el-input v-model="form.alt"></el-input>
            </el-form-item>
            <el-form-item label="是否应用">
                <el-switch v-model="form.flag"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button @click="addBanner">添加</el-button>
                <el-button @click="hideSelf">取消</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<style scoped>
.addbanner-box {
    padding: 40px;
    width: 400px;
    height: 300px;
    background-color: #ededed;
}
</style>
